<template>
  <div class="edit-dialog">
    <el-dialog
      v-model="dialog"
      :title="titleName"
      :visible.sync="dialog"
      :close-on-click-modal="false"
      :show-close="true"
      width="600px"
      center
      @close="handleClose"
    >
      <el-form :model="formData" :rules="rules" ref="formRef" label-position="right" label-width="auto">
        <el-form-item prop="name" label="平台名称" style="width: 100%">
          <el-input v-model="addFormData.name" maxlength="80" size="medium" placeholder="请输入平台名称" style="width: 100%"/>
        </el-form-item>
        <!--<el-form-item prop="displayName" label="平台别名" style="width: 100%">
          <el-input v-model="addFormData.displayName" maxlength="80" size="medium" placeholder="请输入平台别名"
                    style="width: 100%"/>
        </el-form-item>-->
        <el-form-item prop="type" label="平台类型" style="width: 100%">
          <el-radio-group v-model="addFormData.type" style="width: 100%">
            <el-radio label="IEQ">IEQ</el-radio>
            <el-radio label="PMS">PMS</el-radio>
            <el-radio label="OPT">OPT</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="buildType" label="建筑类型" style="width: 100%">
          <el-radio-group v-model="addFormData.buildType" style="width: 100%">
            <el-radio label="HOSPITAL">医院</el-radio>
            <el-radio label="OFFICE">办公楼</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="description" label="平台描述" style="width: 100%">
          <el-input type="textarea" v-model="addFormData.description" :rows="2" maxlength="80" placeholder="请输入平台描述" style="width: 100%" />
        </el-form-item>
        <el-form-item label="平台LOGO">
          <el-upload
            class="upload-demo"
            drag
            ref="uploadAdd"
            action
            :http-request="uploadImg"
            :on-success="uploadImgSuccess"
            :on-remove="handleRemove"
            multiple
            show-file-list
          >
            <img v-if="uploadUrl" :src="uploadUrl" class="uploadImg" style="width: 100%;height: 100%;">
            <i class="el-icon-upload"/>
            <div class="el-upload__text">
              将文件拖到此处，或
              <em>点击上传</em>
            </div>
            <!-- </div> -->
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过20MB</div>
          </el-upload>
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" :loading="submitLoading" icon="el-icon-check" @click="submit('formRef')">提 交</el-button>
          <el-button icon="el-icon-close" @click="handleClose">取 消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
  import {create, edit} from '@/api/platformManage';
  import {upload, getImg} from "@/api/common";

  export default {
    name: 'platformManageEdit',
    props: {
      formData: Object,
      showDialog: Boolean,
      editType: Number
    },
    data() {
      return {
        addFormData: {},
        titleName: '创建平台',
        submitLoading: false,
        uploadUrl: '',
        logoImage: '',
        rules: {
          name: [{required: true, message: "请输入平台名称", trigger: "blur"}],
          /*displayName: [{required: true, message: "请输入平台别名", trigger: "blur"}],*/
          type: [{required: true, message: "请选择平台类型", trigger: "blur"}],
          buildType: [{required: true, message: "请选择建筑类型", trigger: "blur"}],
          description: [{required: true, message: "请输入平台描述", trigger: "blur"}]
        }
      }
    },
    computed: {
      dialog: function () {
        return this.showDialog
      }
    },
    watch: {
      dialog(newVal, oldVal) {
        if (newVal) {
          this.addFormData = this.formData;
          if(this.addFormData.platformId != null){
            this.titleName = "编辑平台";
          }else{
            this.titleName = "创建平台";
          }
          this.getMessage()
        }
      }
    },
    mounted() {
      this.uploadUrl = '';
    },
    methods: {
      getMessage() {
        if (this.addFormData.logoImage) {
          let data = {
            key: this.addFormData.logoImage
          };
          getImg(data).then(res => {
            if (res["code"] == 200) {
              this.uploadUrl = res.value;
            }
          });
        } else {
          this.uploadUrl = '';
          this.logoImage = "";
        }
      },
      uploadImg(f) {
        let param = new FormData(); //创建form对象
        param.append("file", f.file); //通过append向form对象添加数据
        param.append("type", "PLATFORM_LOGO_PIC"); //添加form表单中其他数据
        upload(param) //上传
          .then(response => {
            if (response.code == "200") {
              this.uploadUrl = response.value.url;
              this.logoImage = response.value.key;
              this.$message.success("上传成功!");
              this.close();
              //  this.$emit("refreshData");
              //  onSuccess(response.data);
            }
          })
          .catch(({err}) => {
            f.onError();
          });
      },
      uploadImgSuccess(response, file, fileList) {
        // 缓存接口调用所需的文件路径
        this.$message.success("Logo上传成功!");
      },
      handleRemove(file, fileList) {
        // 更新缓存图片
        console.log("Logo已删除");
      },
      // 取消事件
      handleClose() {
        this.$emit('changeVisibleEditPlatform', false)
      },
      submit(formName) {
        this.submitLoading = true;
        this.$refs[formName].validate(valid => {
          if (valid) {
            const that = this;
            if (that.formData && that.formData.platformId) {
              const data = {
                ...that.formData,
                logoImage: this.logoImage
              }
              edit(data)
                .then(res => {
                  that.submitLoading = false
                  if (res['code'] == 200) {
                    that.$emit('changeVisibleEditPlatform', false)
                    that.$emit('getList')
                    this.$message.success("编辑成功!");
                  } else {
                    that.$message(res['msg'])
                  }
                })
                .catch(() => {
                  that.submitLoading = false
                })
            } else {
              const data = {
                ...that.formData,
                logoImage: this.imgKeys
              };
              create(data)
                .then(res => {
                  that.submitLoading = false;
                  if (res["code"] == 200) {
                    that.$emit("changeVisibleEditPlatform", false);
                    that.$emit("getList");
                    this.$message.success("创建成功!");
                  } else {
                    that.$message(res["msg"]);
                  }
                })
                .catch((e) => {
                  that.submitLoading = false;
                });
            }
          } else {
            this.submitLoading = false;
            return false;
          }
        });
      }
    }
  }
</script>
<style>
</style>
